<!--  -->
<template>
  <el-form label-position="left" label-width="100px" size="small" class="filter-form-inline">
    <el-row>
      <el-col :span="24">
        <item-title title="基本信息" />
      </el-col>

      <el-col :span="8">
        <el-form-item label="配送商名：">
          {{ formData?.businessFlow?.distributeName }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="导入时间：">
          {{ dateFormat("yyyy-mm-dd HH:MM:SS",formData?.businessFlow?.createdAt) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="操作人：">
          {{ formData?.businessFlow?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <item-title title="原始流向" />
      </el-col>
      <el-col :span="24">
        <originalDetail :table-data="tableData1" businessFlowType="1" />
      </el-col>

      <el-col :span="24">
        <item-title title="流向核算数据" />
      </el-col>
      <el-col>
        <flowDetails :form-data="formData" :table-data="tableData2" />
      </el-col>

      <el-col :span="24">
        <item-title title="操作记录" style="margin-top: 20px" />
      </el-col>
      <el-col :span="24">
        <operation-view mode="business_flow" :id="id" />
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs,} from "vue";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  components: {
    flowDetails: defineAsyncComponent(() =>
      import("@CRM/views/businessFlow/flowImport/modules/flowDetails.vue")
    ),
    originalDetail: defineAsyncComponent(() =>
      import("@CRM/views/businessFlow/flowImport/modules/originalDetail.vue")
    ),
  },
  setup(props) {
    const api = inject("api");
    const data = reactive({
      activeName: "1",
      formData: {},
      tableData1: [],
      tableData2: [],
    });

    // 获取详情
    const handlDetail = (id) => {
      api.businessFlow.TBUSINESSFLOW_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.businessFlow;
        }
      });
    };

    const handlList = (type) => {
      return new Promise((resolve, reject) => {
        let dataList = {
          id: Number(props.id),
          type: type,
        };
        api.businessFlow.TBUSINESSFLOW_DETAIL_LIST(dataList).then((res) => {
          if (res.code === 0) {
            resolve(res.data.list);
          } else {
            reject();
          }
        });
      });
    };

    const handlTable = () => {
      Promise.all([handlList(1), handlList(2)]).then((a) => {
        if (a && a.length > 0) {
          data.tableData1 = a[0];
          data.tableData2 = a[1];
        }
      });
    };

    onMounted(() => {
      handlDetail(props.id);
      handlTable();
    });

    return {
      ...toRefs(data),
      handlDetail,
      handlList,
      handlTable,
    };
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
